<template>
  <div class="order-container">
    <!-- 顶部引导图 -->
    <div class="banner-section">
      <img v-if="userLanguage.code == 'zh_CN'" src="@/assets/images/icons/order_flow.png" class="guide-banner"
        alt="订单流程指引">
      <img v-else src="@/assets/images/icons/order_flow.png" class="guide-banner" alt="Order Flow Guide">
    </div>

    <div class="order-title">
      Orders
    </div>

    <!-- 订单状态筛选 -->
    <div class="filter-section">
      <div class="filter-tabs">
        <div class="tab-item" :class="{ active: currentName === 'name1' }" @click="selectTab('name1')">
          {{ $t('user.all') }}
        </div>
        <div class="tab-item" :class="{ active: currentName === 'name2' }" @click="selectTab('name2')">
          {{ $t('user.wait_payment') }}
          <span class="badge" v-if="userReminder.waitPaymentOrderQuantity > 0">
            {{ userReminder.waitPaymentOrderQuantity > 99 ? '99+' : userReminder.waitPaymentOrderQuantity }}
          </span>
        </div>
        <div class="tab-item" :class="{ active: currentName === 'name3' }" @click="selectTab('name3')">
          {{ $t('order.confirm_order') }}
          <span class="badge" v-if="userReminder.waitConfirmOrderQuantity > 0">
            {{ userReminder.waitConfirmOrderQuantity > 99 ? '99+' : userReminder.waitConfirmOrderQuantity }}
          </span>
        </div>
      </div>

      <div class="search-box">
        <div class="search-left">
          <div class="search-input">
            <Icon type="ios-search" class="search-icon" size="18" />
            <input v-model="form.subject" @keyup.enter="onSearch" :placeholder="$t('customOrder.tradeName')">
          </div>

          <!-- <select v-model="form.activityType" @change="onSearch">
            <option value="">{{ $t('activity.all_activity_type') }}</option>
            <option v-for="item in activityArr" :value="item.status" :key="item.status">
              {{ $t(item.text) }}
            </option>
          </select> -->

          <Select v-model="form.status" @change="onSearch" style="width:260px; height:40px;" class="search-input">
            <Option v-for="item in statusList" :value="item.status" :key="item.status">
              {{ $t(item.text) }}
            </Option>
          </Select>

          <button class="search-btn" @click="onSearch">
            {{ $t("user.search") }}
          </button>
        </div>

        <!-- <div class="search-right">
          <button class="assistant-btn" @click="openMet">
            <img src="@/assets/images/processDemo/lead_icon.png" alt="">
            {{ $t(titleName) }}
          </button>
        </div> -->
      </div>
    </div>

    <div class="cart-table-header">
      <div class="item" style="flex:1;">
        Product Details
      </div>
      <div class="item text-center" style="width:120px;">
        Unit Price
      </div>
      <div class="item text-center" style="width:120px;">
        Quantity
      </div>
      <div class="item text-center" style="width:120px;">
        Added Services
      </div>
      <div class="item text-center" style="width:120px;">
        Product Amount
      </div>
      <div class="item text-center" style="width:120px;">
        Remark
      </div>
      <div class="item text-center" style="width:120px;">
        Order Status
      </div>
    </div>

    <div class="cart-empty" v-if="!cartLoading && dataList.length == 0">
      <t-no-data type="data"></t-no-data>
    </div>

    <div class="cart-table-body" v-if="dataList.length > 0">
      <div class="shop-card" v-for="order in dataList" :key="order.subOrder ? order.subOrder : order.orderNo">
        <div class="shop-header">
          <t-platform class="platform-tag" :type="order.itemList[0].channel"></t-platform>
          <div class="item">
            <span>{{ $t("user.orderNumber") }}: {{ order.subOrder ? order.subOrder : order.orderNo }}</span>
          </div>
          <div class="item">
            <span>{{ $t("user.creationTime") }}: {{ order.orderTime }}</span>
          </div>
          <div class="item">
            <span>{{ appName }} {{ $t("user.stash") }}</span>
          </div>
          <div class="item"
            v-if="order.itemList[0].replenishmentTime && order.itemList[0].outOfStockStatus == '4' && order.itemList[0].orderStatus == 'WAIT_PROCESS'">
            <span>{{ $t('order.arrivalWait') }}：{{ order.itemList[0].replenishmentTime }}</span>
          </div>
        </div>

        <template v-for="(item, index) in order.itemList">
          <div class="shop-product-list" :key="item.id">
            <div class="item" style="flex:1;">
              <div class="product-info">
                <div class="product-image">
                  <product-picture v-if="item.mainImg" :image-list="[item.mainImg]"></product-picture>
                  <img v-else class="default-image" src="@/assets/images/public/default-image.png" alt="">

                  <!-- 拼团标签 -->
                  <div class="group-tag" v-if="item.orderGroupVo">
                    <div class="discount-tag">
                      <div>{{ bigTimes(item.orderGroupVo.discount, 100) }}%</div>
                      <div>OFF</div>
                    </div>
                    <div class="status-tag">
                      <img src="@/assets/images/public/dian.png" alt="">
                      <span>{{ groupStatus(item.orderGroupVo.groupStatus) }}</span>
                    </div>
                  </div>
                </div>
                <div class="product-details">
                  <!-- 商品标题 -->
                  <router-link v-if="item.channel"
                    :to="`/goods/details?id=${item.spuNo}&channel=${item.channel}` + (userInfo.inviteCode ? `&inviteCode=${userInfo.inviteCode}` : '')"
                    class="product-title">
                    {{ item.subject }}
                  </router-link>
                  <div v-else @click="jumpBtn(item.detailUrl)" class="product-title">
                    {{ item.subject }}
                  </div>

                  <!-- 商品属性 -->
                  <div class="product-attributes">
                    <div class="attribute-item" v-for="attributeItem in item.skuAttrEnumFormatList"
                      :key="attributeItem.id">
                      {{ attributeItem.name }}：{{ attributeItem.value }}
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <div class="item text-center" style="width:120px;">
              <!-- 商品价格 -->
              <div class="product-price">
                {{ userInfo.currencySymbol }} {{ item.price }}
              </div>
            </div>

            <div class="item text-center" style="width:120px;">
              <!-- 商品数量 -->
              <div class="product-quantity">
                x {{ item.quantity }}
              </div>
            </div>

            <div class="item text-center" style="width:120px;">
              <!-- 增值服务 -->
              <div class="value-services">
                <div class="service-item">
                  <span class="service-btn" @click="cusMet(item)" :class="{ disabled: compStatus(item) }">
                    {{ $t("custom.cus_name_pic") }}
                  </span>
                  <Tooltip max-width="200" :content="$t('custom.name_pic_tip')">
                    <div class="tooltip">
                      <i class="help-icon"></i>
                    </div>
                  </Tooltip>
                </div>
                <div class="service-item">
                  <span class="service-btn" @click="cusMet(item)" :class="{ disabled: compStatus(item) }">
                    {{ $t("custom.cus_name_vid") }}
                  </span>
                  <Tooltip max-width="200" :content="$t('custom.name_vid_tip')">
                    <div class="tooltip">
                      <i class="help-icon"></i>
                    </div>
                  </Tooltip>
                </div>
              </div>
            </div>

            <div class="item text-center" style="width:120px;">

              <!-- 商品总价 -->
              <div class="product-total">
                <div class="total-price">
                  <span>{{ userInfo.currencySymbol }} {{ goodsPrice(item.price, item.quantity, item.expressFee)
                  }}</span>
                  <div class="price-tooltip">
                    <i class="help-icon"></i>
                    <div class="tooltip-content">
                      <div>{{ $t("user.commodityAmount") }} {{ userInfo.currencySymbol }} {{ compAmount(item.price,
                        item.quantity, item.couponDiscountAmount) }}</div>
                      <div>{{ $t("user.freightWarehouse") }} {{ userInfo.currencySymbol }} {{ item.expressFee }}
                      </div>
                      <div>{{ $t("wayBill.coupon_fee") }} {{ userInfo.currencySymbol }} {{ item.couponDiscountAmount
                      }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="coupon-discount" v-if="item.couponDiscountAmount && item.couponDiscountAmount > 0">
                  - {{ userCurrency.code }} {{ item.couponDiscountAmount }}
                </div>
              </div>
            </div>
            <div class="item text-center" style="width:120px;">
              <!-- 备注 -->
              <div class="product-remark">
                <div class="remark-text">{{ item.remarks }}</div>
                <img v-if="item.orderStatus == 'INIT' || item.orderStatus == 'WAIT_PAYMENT'"
                  src="@/assets/images/parcel/edit-aeb.png" class="edit-icon" @click="onRmk(item)">
              </div>
            </div>
            <div class="item text-center" style="width:120px;">
              <!-- 订单状态 -->
              <div class="order-status">
                <order-status :status="item.orderStatus" :statusName="item.orderStatusName"
                  :subStatus="item.internalStatus" :orderNo="item.orderNo"></order-status>

                <!-- 查看物流 -->
                <div class="logistics-btn" v-if="item.expressNoList.length > 0 && item.orderStatus != 'RETURNED'"
                  @click="showParcelPop(item)">
                  {{ $t("user.viewLogistics") }}
                </div>

                <!-- 拼团邀请 -->
                <div class="group-action"
                  v-if="item.orderGroupVo && (item.orderGroupVo.groupStatus == 'WAIT' || item.orderGroupVo.groupStatus == 'COMPLETE') && item.orderStatus != 'WAIT_PAYMENT'">
                  <button class="invite-btn" @click="inviteMet(item)">
                    <img src="@/assets/images/pay/flash.png" alt="">
                    <span>{{ btnText(item.orderGroupVo.groupStatus) }}</span>
                  </button>
                  <div class="invite-tip">{{ $t('goods.group_play_text40') }}</div>
                </div>

                <!-- 申请奖励 -->
                <button class="reward-btn"
                  v-if="item.orderStatus == 'STORED' || (item.orderGroupVo && item.orderGroupVo.groupStatus == 'COMPLETE')"
                  @click="rewardBtn(item)">
                  <img src="@/assets/images/login/reward.png" alt="">
                  {{ $t('user.apply_award') }}
                </button>
              </div>
            </div>

          </div>

          <div class="shop-footer" :key="index">
            <!-- 订单操作 -->
            <div class="product-actions">

              <!-- 待支付操作 -->
              <div class="payment-actions" v-if="order.status == 'WAIT_PAYMENT'">
                <div class="payment-timer">
                  <span>
                    Remaining Payment Time:
                  </span>
                  <count-down :current-time="order.serverTime" :end-time="order.expiredTime"></count-down>
                </div>
                <Button type="primary" @click="onPay(order)">
                  {{ $t("user.pay_text") }}
                </Button>
              </div>

              <!-- 申请退货 -->
              <div class="return-section"
                v-if="item.returnable && item.returnOrderApplyTime && item.serverTime < item.returnOrderApplyTime">

                <div class="return-timer" style="margin-right:16px;">
                  <span>
                    Remaining Return Time:
                  </span>
                  <count-down :current-time="item.serverTime" :end-time="item.returnOrderApplyTime"></count-down>
                  <Tooltip max-width="200" :content="$t('user.count_time_tips')">
                    <i class="help-icon"></i>
                  </Tooltip>
                </div>
                <Button type="primary" @click="applyBtn(item)">{{ $t('user.apply_text') }}</Button>
              </div>

              <!-- 取消退货 -->
              <Button type="primary" @click="cancelApply(item)"
                v-if="item.orderStatus == 'RETURNING_GOODS' && item.returnOrder && (item.returnOrder.status == 'UNPAYMENT' || item.returnOrder.status == 'UNCONFIRM')">{{
                  $t('user.cancel_apply') }}</Button>

              <!-- 补款按钮 -->
              <div class="mend-btn"
                v-if="order && order.status == 'STORED' && order.itemList && order.itemList.length && order.itemList[0].returnOrder && order.itemList[0].orderStatus == 'RETURNING_GOODS' && order.itemList[0].returnOrder && order.itemList[0].returnOrder.status == 'UNPAYMENT'">
                <router-link :to="`/pay?id=${order.itemList[0].returnOrder.id}&markText=mend`">
                  <button class="mend-button">
                    {{ $t("user.mend_text") }}
                  </button>
                </router-link>
              </div>

              <!-- 订单详情 -->
              <Button @click="detailMet(order, item)"
                v-if="item.orderStatus !== 'INIT' && item.orderStatus !== 'WAIT_PAYMENT'">{{ $t('user.order_detail')
                }}</Button>
            </div>
          </div>
        </template>

      </div>
    </div>

    <!-- 分页 -->
    <div class="paginat">
      <Page :total="totalPage" show-sizer />
    </div>

    <div class="pagination" v-if="false">
      <div class="pagination-inner">
        <div class="page-size-selector">
          <select v-model="form.pageSize" @change="onPageSize">
            <option value="10">10 {{ $t('public.perPage') }}</option>
            <option value="20">20 {{ $t('public.perPage') }}</option>
            <option value="50">50 {{ $t('public.perPage') }}</option>
          </select>
        </div>
        <div class="page-numbers">
          <button v-for="page in Math.ceil(totalPage / form.pageSize)" :key="page"
            :class="{ active: form.pageNo === page }" @click="onPage(page)">
            {{ page }}
          </button>
        </div>
      </div>
    </div>

    <!-- 各种弹窗组件 -->
    <order-detail ref="childOrder" :mainOrderId="mainOrderId" :subOrderId="subOrderId"
      @discordJump="discordJump"></order-detail>

    <edit-desc ref="childRef" @customImg="customImg" @newRemarks="newRemarks" @updateMet="updateMet"></edit-desc>

    <returns-com ref="returnRef" :orderNo="orderNo" :orderInfo="orderInfo"></returns-com>

    <cancel-return ref="cancelRef" :orderNo="orderNo"></cancel-return>

    <custom-service-pop ref="customServiceRef" :isRead="true" :isShowQcVideoCus="isShowQcVideoCus"
      @confirmMet="confirmMet"></custom-service-pop>

    <guide-assiatant ref="guideRef" :dataArr="guideArr" :titleData="titleName"></guide-assiatant>

    <MsgPop ref="msgPopRef" :msgInfo="msgInfo"></MsgPop>

    <reply-pop ref="replyRef" @updateMet="getDataList"></reply-pop>

    <cancel-tip-pop ref="cancelTipRef" @confirmMet="cancelMet"></cancel-tip-pop>

    <share-group-pop ref="groupRef"></share-group-pop>

    <share-join-pop ref="joinRef"></share-join-pop>

    <!-- 取消订单弹窗 -->
    <div class="modal-overlay" v-if="cancelPop">
      <div class="modal-container">
        <div class="modal-header">
          <h3>{{ $t('user.cancelOrder') }}</h3>
          <i class="close-icon" @click="onHidePop"></i>
        </div>
        <div class="modal-body">
          <div class="warning-message">
            <i class="warning-icon"></i>
            {{ $t("order.orderCancelSub") }}
          </div>
          <select v-model="cancelType" class="reason-select">
            <option v-for="item in reasonList" :value="item.value" :key="item.value">
              {{ $t(item.label) }}
            </option>
          </select>
          <textarea v-if="cancelType == 5" v-model="cancelReason" maxlength="200"
            :placeholder="$t('user.pleaseFillReason')" class="reason-textarea"></textarea>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="onHidePop">
            {{ $t("public.cancel") }}
          </button>
          <button class="confirm-btn" @click="onCancelOrder" :disabled="cancelLoading">
            {{ $t("public.confirm") }}
            <span class="loading-spinner" v-if="cancelLoading"></span>
          </button>
        </div>
      </div>
    </div>

    <!-- 聊天弹窗 -->
    <div class="chat-modal" v-if="chatPop">
      <div class="chat-header">
        <h3>{{ $t('user.orderNumber') }}：{{ chatId }}</h3>
        <i class="close-icon" @click="onChatPop"></i>
      </div>
      <div class="chat-body">
        <chat-pop ref="chatPop" v-if="chatPop" :order-id="chatId" @on-cancel="chatPop = false"></chat-pop>
      </div>
    </div>

    <!-- 物流详情弹窗 -->
    <div class="logistics-modal" v-if="physical">
      <div class="logistics-header">
        <h3>{{ $t('user.logisticsInfo') }}</h3>
        <i class="close-icon" @click="physical = false"></i>
      </div>
      <div class="logistics-body">
        <t-loading v-if="logisticsLoading"></t-loading>
        <div class="timeline" v-for="item in logisticsInfo" :key="item.logisticsId">
          <div class="timeline-item" v-for="(setItem, index) in sortList(item.logisticsSteps)" :key="index">
            <div class="timeline-content">{{ setItem.remarks }}</div>
            <div class="timeline-time">{{ setItem.acceptTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 物流包裹选择弹窗 -->
    <div class="parcel-modal" v-if="parcelPop">
      <div class="parcel-header">
        <h3>{{ $t('user.logisticsInfo') }}</h3>
        <i class="close-icon" @click="parcelPop = false"></i>
      </div>
      <div class="parcel-body">
        <table class="parcel-table">
          <thead>
            <tr>
              <th>{{ $t("user.logisticsNumber") }}</th>
              <th>{{ $t("user.operation") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in parcelList" :key="item.id">
              <td>{{ item.id }}</td>
              <td>
                <button class="view-btn" @click="viewLogistics(item.id)">
                  {{ $t("user.viewLogistics") }}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="parcel-footer">
        <button class="cancel-btn" @click="parcelPop = false">
          {{ $t("public.cancel") }}
        </button>
        <button class="confirm-btn" @click="parcelPop = false">
          {{ $t("public.confirm") }}
        </button>
      </div>
    </div>

    <!-- 收货地址弹窗 -->
    <div class="address-modal" v-if="viewAddressPop">
      <div class="address-header">
        <h3>{{ $t('user.shippingAddress') }}</h3>
        <i class="close-icon" @click="viewAddressPop = false"></i>
      </div>
      <div class="address-body">
        <order-address :addressInfo="addressInfo"></order-address>
      </div>
    </div>

    <!-- 补款弹窗 -->
    <div class="mend-modal" v-if="patchPop">
      <div class="mend-header">
        <h3>{{ $t('home.add_fee_title') }}</h3>
        <i class="close-icon" @click="patchPop = false"></i>
      </div>
      <div class="mend-body">
        <table class="mend-table">
          <thead>
            <tr>
              <th>{{ $t("home.product_name") }}</th>
              <th>{{ $t("home.product_nature") }}</th>
              <th>{{ $t("home.mend_cost_type") }}</th>
              <th>{{ $t("home.mend_cost_fee") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in detailList" :key="item.subject">
              <td>{{ item.subject }}</td>
              <td>{{ item.skuRemarks }}</td>
              <td>{{ item.type }}</td>
              <td>{{ item.additionalAmount }}</td>
            </tr>
          </tbody>
        </table>

        <div class="price-summary">
          <div class="price-item">
            <span>{{ $t('home.goods_original_price') }}：</span>
            <span>{{ userInfo.currencySymbol }} {{ itemInfo.price }}</span>
          </div>
          <div class="price-item">
            <span>{{ $t('home.purchase_goods_price') }}：</span>
            <span>{{ userInfo.currencySymbol }} {{ purchase_price }}</span>
          </div>
          <div class="price-item">
            <span>{{ $t('home.commodity_rate') }}：</span>
            <span>{{ userInfo.currencySymbol }} {{ itemInfo.expressFee }}</span>
          </div>
          <div class="price-item">
            <span>{{ $t('home.purchase_rate') }}：</span>
            <span>{{ userInfo.currencySymbol }} {{ freight_purchase }}</span>
          </div>
        </div>

        <div class="total-amount">
          <span>{{ $t('home.total_compensation') }}：</span>
          <span class="amount">{{ userInfo.currencySymbol }} {{ itemInfo.additionalAmount }}</span>
          <div class="tooltip">
            <i class="help-icon"></i>
            <div class="tooltip-content">{{ $t('user.amount_text') }}</div>
          </div>
        </div>
      </div>
      <div class="mend-footer">
        <button class="cancel-btn" @click="patchPop = false">
          {{ $t('pay.cancel') }}
        </button>
        <button class="confirm-btn" @click="nextBtn(itemInfo.id)">
          {{ $t('home.continue_pay') }}
        </button>
      </div>
    </div>

    <!-- 拒绝补款弹窗 -->
    <div class="reject-modal" v-if="rejectPop">
      <div class="reject-body">
        <div class="reject-message">{{ $t('home.reject_pop_tips') }}</div>
        <div class="reject-actions">
          <button class="cancel-btn" @click="cancelOrderBtn">
            {{ $t('user.cancelOrder') }}
          </button>
          <button class="close-btn" @click="rejectPop = false">
            {{ $t('user.close') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  cancelOrder,
  orderList,
  queryLogisticsInfos,
  queryLogisticsTrace,
  orderItemCancel,
  addService,
  waitSentOrders,
  handleOrderUserReply,
  getListUserMessage,
  getCheckCouponExpiration
} from "@/api/order";
import TLoading from "@/components/t-loading";
import OrderStatus from "@/views/main/user/components/order-status";
import CountDown from "@/views/main/user/components/count-down";
import ChatPop from "@/views/main/user/my-shipment/chat-pop";
import TNoData from "@/components/t-no-data";
import { debounce } from "@/common/common";
import { bigPlus, bigTimes, bigMinus } from "@/common/digital-computation";
import { orderEdit, orderItemRejectClearBalance } from "@/api/cart";
import { mapState } from "vuex";
import ProductPicture from "@/views/main/user/components/product-picture";
import OrderAddress from "@/views/main/user/components/order-address";
import TPlatform from "@/components/t-platform";
import orderDetail from "@/views/main/user/components/order-detail.vue";
import editDesc from './components/edit-desc.vue';
import user from "@/store/models/user";
import ReturnsCom from './components/returns-com.vue';
import CancelReturn from "./components/cancel-return.vue";
import qcPhotos from "./components/qc-photos.vue";
import CusPicList from './components/cus-pic-list.vue';
import CusVidList from './components/cus-vid-list.vue';
import CustomServicePop from '../pay/compontents/custom-service-pop.vue';
import OrderRemark from "./components/order-remark.vue";
import { pointUser } from "@/common/point/api-hook";//打点日志
import { color } from "echarts";
import GuideAssiatant from './components/guide-assiatant.vue';
import MsgPop from "./components/msg-pop.vue";
import ReplyPop from "./components/reply-pop.vue";
import CancelTipPop from './components/cancel-tip-pop.vue';
import shareGroupPop from "./components/share-group-pop.vue";
import shareJoinPop from "./components/share-join-pop.vue";
export default {
  name: "order",
  components: {
    TPlatform,
    OrderAddress,
    ProductPicture,
    TNoData,
    ChatPop,
    CountDown,
    OrderStatus,
    TLoading,
    orderDetail,
    editDesc,
    ReturnsCom,
    CancelReturn,
    qcPhotos,
    CusPicList,
    CusVidList,
    CustomServicePop,
    OrderRemark,
    GuideAssiatant,
    MsgPop,
    ReplyPop,
    CancelTipPop,
    shareGroupPop,
    shareJoinPop
  },
  data() {
    return {
      label1: (h) => {
        return h('div', [
          h('span', this.$t('user.wait_payment')),
          h('Badge', {
            class: 'badge-sty',
            props: {
              count: this.userReminder.waitPaymentOrderQuantity > 99 ? '99+' : this.userReminder.waitPaymentOrderQuantity
            }
          })
        ])
      },
      label2: (h) => {
        return h('div', [
          h('span', this.$t('order.confirm_order')),
          h('Badge', {
            class: 'badge-sty',
            props: {
              count: this.userReminder.waitConfirmOrderQuantity > 99 ? '99+' : this.userReminder.waitConfirmOrderQuantity
            }
          })
        ])
      },
      msgInfo: [],
      orderInfo: {},
      currentName: "name1",
      itemInfo: {},
      purchase_price: 0,
      freight_purchase: 0,
      patchPop: false,
      columnsList: [
        {
          title: this.$t("home.product_name"),
          key: 'subject'
        },
        {
          title: this.$t("home.product_nature"),
          key: 'skuRemarks'
        },
        {
          title: this.$t("home.mend_cost_type"),
          key: 'type'
        },
        {
          title: this.$t("home.mend_cost_fee"),
          key: 'additionalAmount'
        }
      ],
      detailList: [],
      addressInfo: "",
      viewAddressPop: false, // 查看收货地址弹窗
      columns: [
        {
          title: this.$t("user.logisticsNumber"),
          key: "id",
        },
        {
          title: this.$t("user.operation"),
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                style: {
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.viewLogistics(params.row.id);
                  },
                },
              },
              this.$t("user.viewLogistics")
            );
          },
        },
      ],
      parcelPop: false, // 查询包裹物流信息
      parcelLoading: false, // 查询物流包裹信息loading
      parcelList: [], // 查询物流包裹数据
      chatId: "", // 订单id
      chatPop: false, // 聊天弹窗
      salesReturnPop: false, // 退货弹窗
      salesReturnValue: "", // 选择理由
      salesReturnRmk: "", // 填写原因
      salesReturnCheckbox: false, // 同意承担
      salesReturnList: [
        // 退货理由
        {
          value: 1,
          label: "买错/不喜欢",
        },
        {
          value: 2,
          label: "卖家发错货",
        },
        {
          value: 3,
          label: "商品质量问题",
        },
        {
          value: 4,
          label: "未按约定发货",
        },
        {
          value: 5,
          label: "其他原因",
        },
      ],
      logisticsLoading: false,
      logisticsInfo: [], // 物流信息
      physical: false, // 查看物流弹窗
      cancelLoading: false, // 取消订单
      cancelType: "", // 取消的理由
      cancelPop: false, // 取消弹窗
      cancelReason: "", // 取消订单理由
      orderNo: "", // 订单号
      appName: process.env.VUE_APP_NAME,
      model1: "",
      form: {
        orderNo: "", // 订单号
        pageNo: 1, // 页
        pageSize: 20, // 页数
        status: "all", // 运单状态
      },
      loading: false,
      totalPage: 1,

      dataList: [], // 订单列表
      cancelChildId: "", //子单id
      isActive: "", //当前订单下标
      activityArr: [
        {
          status: 'GROUP',
          text: "goods.group_play_text35",
        }
      ],
      statusList: [
        {
          status: "all",
          text: "user.all",//全部
        },
        // {
        //   status: "INIT",
        //   text: 'user.init',//待提交
        // },
        {
          status: "WAIT_PAYMENT",
          text: "user.awaitingPayment",//待支付
        },
        {
          status: "WAIT_PROCESS",
          text: "user.awaitingOrder",//待接单
        },
        {
          status: "CLEAR_BALANCE",
          text: 'user.clearBalance',//待补款
        },
        {
          status: "PURCHASING",
          text: "user.ordering",//订购中
        },
        {
          status: "PURCHASED",
          text: "user.onOrder",//已订购
        },
        {
          status: "CANCELLED",//取消订购
          text: "user.cancelled",
        },
        {
          status: "WAIT_STOCK_IN",
          text: "user.waitingWarehousing",//已发货(国内)-即待入库
        },
        // {
        //   status: "WAIT_STOCK_IN",
        //   text: "user.waitingWarehousing",//待入库
        // },
        {
          status: "STORED",//已入库
          text: "user.beStorage", // 重要：仓库需要验货、拍照。列表过滤
        },
        {
          status: "SIGNED",
          text: 'user.sign_text',//已签收
        },
        {
          status: "RELINQUISHED_GOODS",
          text: 'user.discard_text',//已弃件
        },
        {
          status: "WAIT_SUBMIT_PARCEl",
          text: 'user.wait_init_text',//待提交包裹
        },
        {
          status: "WAIT_PICKING",
          text: 'user.pack_text',//待拣货
        },
        {
          status: "WAIT_CONFIRM",
          text: 'user.wait_confirm_text',//待确认
        },
        {
          status: "WAIT_SENT_OVERSEA",
          text: "user.pickupPending",//待仓库发货、待揽收
        },
        {
          status: "SHIPPED",//已寄送（海外）、已发货（国际）
          text: "user.shippedInternational",
        },
        {
          status: "RETURNING_GOODS",
          text: 'user.return_ing_text',//退货中
        },
        {
          status: "RETURNED",//已退货
          text: "user.returnCompleted",
        },
        {
          status: "REFUNDED",
          text: 'user.refunded_text',//已退款
        },
        {
          status: "COMPLETED",//已完成
          text: "user.completed",
        }
      ], // 状态列表
      reasonList: [
        {
          value: 1,
          label: "user.buyIt",
        },
        {
          value: 2,
          label: "user.incorrectInformationFilling",
        },
        {
          value: 3,
          label: "user.sellersOutStock",
        },

        {
          value: 4,
          label: "user.unablePay",
        },
        {
          value: 5,
          label: "user.otherReasons",
        },
      ], // 取消理由
      images: [],
      mainOrderId: '',
      subOrderId: '',
      infoList: {},
      rejectPop: false,
      rejectForm: {
        orderItemId: ''
      },
      isShowQcVideoCus: false,
      guideArr: [
        { id: 1, title: 'assistant.assistantOrderSub1', img: 'https://libcdn1.hahbuy.com/guide/如何购买商品.gif' },
        { id: 2, title: 'assistant.assistantOrderSub2', img: 'https://libcdn1.hahbuy.com/guide/如何购买定制服务.gif' },
        { id: 3, title: 'assistant.assistantOrderSub3', img: 'https://libcdn1.hahbuy.com/guide/如何加入购物车.gif' },
        { id: 4, title: 'assistant.assistantOrderSub4', img: 'https://libcdn1.hahbuy.com/guide/如何查看商品到仓库物流.gif' },
        { id: 5, title: 'assistant.assistantOrderSub5', img: 'https://libcdn1.hahbuy.com/guide/如何支付订单.gif' },
      ],
      titleName: 'assistant.assistantOrder',
      timestamp: ''
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userLanguage: (state) => state.user.userLanguage,
      config: state => state.config.config,
      userReminder: state => state.user.userReminder,
      userCurrency: (state) => state.user.userCurrency,
    }),
  },
  created() {
    this.$store.dispatch("getUserInfo");
    if (this.$route.params.orderNo) {
      this.form.orderNo = this.$route.params.orderNo;
    }
    this.getDataList();
  },
  methods: {
    bigTimes,
    // 如果是待支付状态，定制照片和定制视频，颜色为灰色且鼠标移入不显示小手
    compStatus(item) {
      return item.orderStatus === "WAIT_PAYMENT";
    },
    jumpBtn(url) {
      window.location.href = url;
    },
    rewardBtn(item) {
      if (item.orderGroupVo) {
        const source = 'GROUP';
        this.$router.push(`/get-rewards?source=${source}`);
      } else {
        this.$router.push("/get-rewards");
      }
    },
    //跳转外链Discord
    discordJump() {
      if (this.config.supportList && this.config.supportList.length) {
        this.config.supportList.forEach(item => {
          if (item.platform == 'Discord') {
            window.open(item.account)
          }
        })
      }
    },
    // 订单号复制
    copyMet(val) {
      if (val.subOrder) {
        navigator.clipboard.writeText(val.subOrder);
        this.$Message.success(this.$t('public.copySuccess'));
      } else {
        navigator.clipboard.writeText(val.orderNo);
        this.$Message.success(this.$t('public.copySuccess'));
      }
    },
    // 申请退货
    applyBtn(info) {
      this.orderNo = info.id;//子订单ID
      this.orderInfo = info;//订单信息
      this.$refs.returnRef.returnPop = true;//显示弹框
      this.$refs.returnRef.getReturnFee(info.id);//子单退货-费用
    },
    // 取消退货
    cancelApply(info) {
      this.orderNo = info.returnOrder.id;//退货ID
      this.$refs.cancelRef.cancelPop = true;//取消退货弹框
    },
    //定制化要求
    customImg(value) {
      this.infoList.imageRemarks = value;
    },
    newRemarks(value) {
      this.infoList.remarks = value;
    },
    updateMet(e) {
      this.onCartEdit(e);
    },
    onCartEdit(info) {
      orderEdit({
        orderItemId: info.id,
        remarks: info.remarks,
        imageRemarks: info.imageRemarks
      }).then((res) => {
        if (res.code == 200) {
          this.$refs.childRef.descPopup = false;
          this.getDataList();
          // this.getConfirmOrderList();
        }
      });
    },
    onRmk(info) {
      this.infoList = info;
      this.$refs.childRef.open(info);
      // this.$refs.childRef.urlImage = info.imageRemarks;
      // this.$refs.childRef.imageList = info.imageRemarks;
      // this.$refs.childRef.value = info.remarks;
      // this.$refs.childRef.defaultFileList = [{name:'img.png',url:info.imageRemarks}];
      //    this.$refs.childRef.descPopup = true;
    },
    detailMet(item, info) {
      this.$refs.childOrder.open(item.orderNo, info.id);
      this.mainOrderId = item.orderNo;//主单编号
      this.subOrderId = info.id;//子单编号
    },
    selectTab(name) {
      if (name == 'name2') {
        delete this.form.isQueryWaitConfirm;
        this.form.status = 'WAIT_PAYMENT';
        this.getDataList();
      } else if (name == 'name3') {
        this.form.isQueryWaitConfirm = 1;// "是否查询待确认 0-否 1-是"
        delete this.form.status;
        this.getDataList();
      } else {
        delete this.form.isQueryWaitConfirm;
        this.form.status = 'all';
        this.getDataList();
      }
      this.currentName = name;
    },
    // 拒绝补款
    rejectBtn(item) {
      this.rejectPop = true;
      this.rejectForm.orderItemId = item.id;
    },
    cancelOrderBtn() {
      orderItemRejectClearBalance(this.rejectForm).then((res) => {
        if (res.code == 200) {
          this.rejectPop = false;
          this.getDataList();
        }
      })
    },
    // 补款弹窗
    patchBtn(item) {
      this.detailList = [];
      this.detailList.push({ subject: item.subject, skuRemarks: item.skuRemarks, type: this.$t("home.add_fee_title"), additionalAmount: this.userInfo.currencySymbol + " " + item.additionalAmount });
      this.itemInfo = item;
      this.purchase_price = parseFloat(this.itemInfo.price + this.itemInfo.additionalPrice).toFixed(2);//采购商品单价
      this.freight_purchase = parseFloat(this.itemInfo.expressFee + this.itemInfo.additionalExpressFee).toFixed(2);//采购运费
      this.patchPop = true;
    },
    nextBtn(id) {
      this.patchPop = false;
      setTimeout(() => {
        this.$router.push(`/pay?id=${id}&&markText=mend`);
      }, 200)
    },
    //删除订单
    cancelOrder() {
      this.$Modal.confirm({
        title: this.$t("pay.setPaymentPassword"),
        content: this.$t("pay.noPaymentPassword"),
        okText: this.$t("pay.settings"),
        cancelText: this.$t("pay.cancel"),
        onOk: () => {
          this.$router.push("/user/set/pay");
        },
      });
    },
    showAddressPop(item) {
      // 收货地址弹窗
      this.viewAddressPop = true;
      this.addressInfo = item.orderAddress;
    },
    onSearch() {
      // 搜索
      this.form.pageNo = 1;
      this.getDataList();
    },
    sortList(list) {
      let arr = [];
      for (let i = 0; i < list.length; i++) {
        arr.unshift(list[i]);
      }
      return arr;
    },
    goodsPrice(price, num, transportAmountCn) {
      let t = bigTimes(price, num);
      return bigPlus(t, transportAmountCn);
    },
    showParcelPop(item) {
      if (item.orderStatus == 'WAIT_STOCK_IN') {
        pointUser('actions', '3000');
      } else if (item.orderStatus == 'SHIPPED') {
        pointUser('actions', '3000-1');
      }

      // 选择查询物流的订单
      this.parcelList = [];
      for (let i = 0; i < item.expressNoList.length; i++) {
        this.parcelList.push({ id: item.expressNoList[i] });
      }
      if (item.expressNoList.length > 1) this.parcelPop = true;
      else this.viewLogistics(item.expressNoList[0]);
    },
    showChatPop(order) {
      if (window.ssq) {
        ssq.push('chatOpen');
        ssq.push('sendTextMessage', "Hi,my order No. " + order);
      }
    },
    viewLogistics(id) {
      // 查看物流信息
      this.logisticsInfo = [];
      this.physical = true;
      this.logisticsLoading = true;
      queryLogisticsTrace(id)
        .then((res) => {
          this.logisticsInfo = res.result;
          this.logisticsLoading = false;
        })
        .catch(() => {
          this.logisticsLoading = false;
        });
    },
    viewPicture(list, index) {
      // 查看图片
      this.images = list;
      this.$viewerApi({
        images: this.images,
        options: {
          initialViewIndex: index,
        },
      });
    },
    keySearch(typeKey) {
      // 搜索
      if (typeKey.code == "Enter") {
        this.form.pageNo = 1;
        this.getDataList();
      }
    },
    // 关闭聊天
    onChatPop() {
      this.$refs.chatPop.upClose();
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onCancelPop(isTrue, value) {
      // 显示取消弹窗
      this.isActive = isTrue;
      if (isTrue) {
        this.orderNo = value.orderNo;
      } else {
        this.cancelChildId = value.itemList[0].id;
      }

      if (value.couponDiscountAmount && value.couponDiscountAmount > 0) {
        getCheckCouponExpiration(isTrue ? value.orderNo : value.itemList[0].id).then((res) => {
          // 检查订单绑定的优惠券是否过期，为true说明过期
          if (res.result) {
            this.$refs.cancelTipRef.open();
          } else {
            this.cancelPop = true;
          }
        }).catch((err) => {
          console.log(err);
        })
      } else {
        this.cancelPop = true;
      }
    },
    cancelMet() {
      this.cancelPop = true;
    },
    onHidePop() {
      // 关闭取消弹窗
      this.cancelChildId = "";
      this.orderNo = "";
      this.cancelReason = "";
      this.cancelType = "";
      this.cancelPop = false;
    },
    onCancelOrder() {
      if (!this.cancelType) {
        this.$Message.error(this.$t('submitParcel.pleaseSelect'));
        return;
      }
      // 取消订单
      if (this.cancelType != 5) {
        for (let i = 0; i < this.reasonList.length; i++) {
          if (this.reasonList[i].value == this.cancelType) {
            this.cancelReason = this.$t(this.reasonList[i].label);
          }
        }
      }
      if (this.isActive) {
        //主单
        cancelOrder({ orderNo: this.orderNo, cancelReason: this.cancelReason }).then((res) => {
          this.onHidePop();
          this.getDataList();
          this.cancelLoading = false;
        }).catch(() => {
          this.cancelLoading = false;
        });
      } else {
        //子单
        orderItemCancel({ id: this.cancelChildId, cancelReason: this.cancelReason }).then((res) => {
          this.onHidePop();
          this.getDataList();
          this.cancelLoading = false;
        }).catch(() => {
          this.cancelLoading = false;
        });
      }

      // if (this.cancelReason == "") {
      //   this.$Message.error(this.$t("user.pleaseFillReason"));
      //   this.$Modal.remove();
      //   return false;
      // }

      this.cancelLoading = true;
    },
    onPage(index) {
      this.form.pageNo = index;
      this.getDataList();
    },
    onPay(info) {
      pointUser('actions', '2009-1');
      // 支付
      this.$router.push(`/pay?id=${info.orderNo}&&markText=indent`);
    },
    getDataList() {
      // 获取订单列表
      this.loading = true;
      let status = this.form.status == "all" ? "" : this.form.status;
      let obj = { ...this.form, ...{ status: status } };
      orderList(obj)
        .then((res) => {
          let data = res.result.records;
          for (let i = 0; i < data.length; i++) {
            data[i].active = false;
          }
          // 拆单
          const processedData = [];
          data.forEach(item => {
            item.subOrder = '';
            if (item.status !== 'INIT' && item.status !== 'WAIT_PAYMENT') {
              item.itemList.forEach(subItem => {
                item.subOrder = subItem.id;
                const newItem = {
                  ...item,
                  itemList: [subItem]
                };
                // 拆单后
                newItem.itemAmount = (subItem.price * subItem.quantity).toFixed(2);
                newItem.totalExpressFee = subItem.expressFee;
                // 重新计算订单总价
                const totalAmount = ((subItem.price * subItem.quantity) + (subItem.expressFee || 0)).toFixed(2);
                newItem.orderAmount = totalAmount;
                // newItem.itemAmount = totalAmount;

                processedData.push(newItem);
              });
            } else {
              processedData.push(item);
            }
          });

          this.dataList = processedData;
          this.timestamp = res.timestamp;
          this.totalPage = res.result.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    compAmount(price, quantity, couponDiscountAmount) {
      let v = bigTimes(price, quantity);
      return bigMinus(v, couponDiscountAmount);
    },
    toPage(name, info) {
      if (name == "cancelOrder") {
        this.onCancelPop(true, info);
      }
    },
    cusMet(info) {

      // 如果有定制服务了就不再显示定制服务,后续如果有多个动态卡片的话需要从新写逻辑
      if (info.videoServicesV1 && info.videoServicesV1.length > 0) {
        this.isShowQcVideoCus = true;
        delete info.videoServicesV1
      }
      // 待接单||订购中||已订购||已发货（国内）||已签收||已入库&&定制服务异常的话也不能追加增值服务
      if ((info.orderStatus === "WAIT_PROCESS" || info.orderStatus === "PURCHASING" || info.orderStatus === "PURCHASED" || info.orderStatus === "WAIT_STOCK_IN" || info.orderStatus === "SIGNED" || info.orderStatus === "STORED") && info.cancelAdditionalTime === null) {
        this.$refs.customServiceRef.open(info);
      }
    },
    // 定制服务追加提交
    confirmMet(val) {
      delete val.id;//val.id是编辑用到的，所以要去除掉
      // 为空的不传
      if (val.services && val.services.length > 0) {
        val.services = val.services.filter(service => service.imageUrl !== "" || service.serviceRemark !== "");
      }
      // 追加定制服务
      addService(val).then((res) => {
        if (res.code === 200) {
          this.$refs.customServiceRef.close();
          setTimeout(() => {
            this.$router.push(`/pay?id=${res.result.orderNo}&&markText=mend`)
          }, 200)
        }
      })
    },
    //转换成时间戳
    toSimestamp(time) {
      if (time) {
        return new Date(time).getTime()
      } else {
        return 0;
      }
    },
    // 卖家缺货操作-继续等待
    nextHandle: debounce(function (val) {
      handleOrderUserReply(val).then((res) => {
        if (res.code == 200) {
          this.getDataList();
        }
      })
    }),
    openMet() {
      this.$refs.guideRef.open();
    },
    // 打开留言板弹窗
    openMsgPop(info) {
      info.unReadMsgFlag = 0;
      getListUserMessage(info.id).then((res) => {
        this.msgInfo = res.result;
        this.$refs.msgPopRef.open();
      })
    },
    // 用户回复弹框
    replyHandle: debounce(function (val) {
      this.$refs.replyRef.open(val);
    }),
    inviteMet(item) {
      if (item.orderGroupVo.groupStatus == 'COMPLETE') {
        this.$refs.groupRef.open(item);
      } else if (item.orderGroupVo.groupStatus == 'WAIT') {
        this.$refs.joinRef.open(item, this.timestamp);
      }
    },
    groupStatus(status) {
      if (status == 'WAIT') {
        return this.$t('goods.group_play_text9');
      } else if (status == 'COMPLETE') {
        return this.$t('goods.group_play_text5');
      } else if (status == 'FAIL') {
        return this.$t('goods.group_play_text44');
      }
    },
    btnText(status) {
      if (status == 'WAIT') {
        return this.$t('goods.group_play_text76');
      } else if (status == 'COMPLETE') {
        return this.$t('goods.group_play_text45');
      } else {
        return ''
      }
    },
    clearMet() {
      delete this.form.activityType;
    }
  },
};
</script>

<style scoped lang="less">
.order-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  border-radius: 20px;
  background: #FFF;

  .banner-section {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;

    .guide-banner {
      width: 100%;
      display: block;
    }
  }

  .order-title {
    font-size: 20px;
    color: #2F333A;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .filter-section {
    margin-bottom: 20px;

    .filter-tabs {
      display: flex;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;

      .tab-item {
        padding: 10px 20px;
        cursor: pointer;
        position: relative;
        font-size: 16px;
        color: #666;
        transition: all 0.3s;

        &.active {
          color: #ff186b;
          font-weight: 500;

          &:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: #ff186b;
          }
        }

        .badge {
          display: inline-block;
          min-width: 18px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          background: #ff186b;
          color: #fff;
          border-radius: 9px;
          font-size: 12px;
          padding: 0 4px;
          margin-left: 5px;
          vertical-align: middle;
        }
      }
    }

    .search-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-left {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;

        .search-input {
          position: relative;
          flex: 1;
          min-width: 250px;

          /deep/ .ivu-select-selection {
            height: 40px;
          }

          .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            margin-top: -10px;
            width: 20px;
            height: 20px;
          }

          input {
            width: 100%;
            height: 40px;
            padding: 0 15px 0 35px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;

            &:focus {
              border-color: #ff186b;
              outline: none;
            }
          }
        }

        select {
          height: 40px;
          padding: 0 15px;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 14px;
          min-width: 200px;
          background-color: #fff;
          appearance: none;
          // background-image: url('@/assets/images/public/select-arrow.png');
          // background-repeat: no-repeat;
          // background-position: right 10px center;
          // background-size: 12px;
          cursor: pointer;

          background-image: none;

          &::after {
            content: "▼";
            position: absolute;
            right: 10px;
            pointer-events: none;
          }

          &:focus {
            border-color: #ff186b;
            outline: none;
          }
        }

        .search-btn {
          height: 40px;
          padding: 0 20px;
          background: #ff186b;
          color: #fff;
          border: none;
          border-radius: 4px;
          font-size: 14px;
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: #e01660;
          }
        }
      }

      .search-right {
        .assistant-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          background: #ffe4ec;
          color: #f21473;
          border: none;
          border-radius: 20px;
          font-size: 14px;
          cursor: pointer;
          transition: background 0.3s;

          img {
            width: 18px;
            height: 18px;
          }

          &:hover {
            background: #ffd0e0;
          }
        }
      }
    }
  }

  .order-list {
    .empty-state {
      background: #fff;
      border-radius: 8px;
      padding: 40px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .order-item {
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      overflow: hidden;

      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;

        .order-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          align-items: center;

          .order-number {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #666;

            .platform-tag {
              margin-right: 5px;
            }

            .copy-icon {
              width: 16px;
              height: 16px;
              background: url('@/assets/images/public/copy-icon.png') no-repeat center;
              background-size: contain;
              cursor: pointer;
              opacity: 0.7;
              transition: opacity 0.3s;

              &:hover {
                opacity: 1;
              }
            }
          }

          .order-time,
          .order-warehouse,
          .order-arrival {
            font-size: 13px;
            color: #999;
          }
        }

        .order-actions {
          display: flex;
          align-items: center;
          gap: 15px;

          .more-actions {
            position: relative;

            .more-btn {
              display: flex;
              align-items: center;
              gap: 5px;
              padding: 6px 12px;
              background: #f5f5f5;
              border-radius: 4px;
              font-size: 13px;
              color: #666;
              cursor: pointer;

              .arrow-down {
                width: 12px;
                height: 12px;
                // background: url('@/assets/images/public/arrow-down.png') no-repeat center;
                // background-size: contain;
                transition: transform 0.3s;

                &::before {
                  content: "▼";
                  font-size: 12px;
                }
              }
            }

            &:hover {
              .action-menu {
                display: block;
              }

              .arrow-down {
                transform: rotate(180deg);
              }
            }

            .action-menu {
              display: none;
              position: absolute;
              right: 0;
              top: 100%;
              background: #fff;
              border-radius: 4px;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
              z-index: 10;
              min-width: 120px;

              .menu-item {
                padding: 8px 15px;
                font-size: 13px;
                color: #666;
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                  background: #f5f5f5;
                  color: #ff186b;
                }
              }
            }
          }

          .message-btn {
            position: relative;
            padding: 6px 12px;
            border: 1px solid #ff186b;
            border-radius: 4px;
            font-size: 13px;
            color: #ff186b;
            cursor: pointer;

            .badge {
              position: absolute;
              top: -4px;
              right: -4px;
              width: 8px;
              height: 8px;
              background: #ff0000;
              border-radius: 50%;
            }
          }

          .service-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: #f5f5f5;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            color: #666;
            cursor: pointer;

            img {
              width: 14px;
              height: 14px;
            }

            &:hover {
              background: #eee;
            }
          }
        }
      }

      .order-products {
        padding: 15px 20px;

        .product-item {
          padding: 15px 0;
          border-bottom: 1px dashed #eee;

          &:last-child {
            border-bottom: none;
          }

          .product-main {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.5fr 1.5fr 1.5fr 1.5fr;
            gap: 15px;
            align-items: center;

            @media (max-width: 1200px) {
              grid-template-columns: 1fr;
              gap: 20px;
            }
          }
        }
      }
    }
  }
}

// 产品详情部分
.product-info {
  display: flex;
  gap: 15px;

  .product-image {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;

    .default-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #f5f5f5;
    }

    .group-tag {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;

      .discount-tag {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 42px;
        height: 42px;
        background: url('@/assets/images/pay/tag_rig.png') no-repeat center;
        background-size: contain;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: rotate(-35deg);
        font-weight: 800;
        font-size: 12px;
        color: #fff;
        line-height: 12px;
      }

      .status-tag {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 3px 5px;
        background: linear-gradient(299deg, #FF326C 0%, #FF3434 41%, #FF3810 100%);
        border-radius: 0 0 8px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-weight: 500;
        font-size: 13px;
        color: #fff;

        img {
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .product-details {
    flex: 1;
    min-width: 0;

    .product-title {
      font-weight: 500;
      font-size: 12px;
      color: #222;
      line-height: 1.4;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &:hover {
        color: #ff186b;
      }
    }

    .product-attributes {
      .attribute-item {
        font-size: 11px;
        color: #969696;
        line-height: 1.4;
        margin-bottom: 2px;
      }
    }
  }
}

// 价格、数量等单元格样式
.product-price,
.product-quantity {
  font-size: 14px;
  color: #333;
  text-align: center;
}

// 增值服务
.value-services {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .service-item {
    display: flex;
    align-items: center;
    gap: 5px;

    .service-btn {
      color: #ff186b;
      font-size: 12px;
      cursor: pointer;
      transition: color 0.3s;
      border-radius: 6px;
      border: 1px solid #F1F1F1;
      height: 20px;
      padding: 0px 6px;

      &.disabled {
        color: #ccc;
        cursor: default;
      }

      &:not(.disabled):hover {
        text-decoration: underline;
      }
    }

    .tooltip {
      position: relative;
      display: inline-block;

      .help-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('@/assets/images/public/help-icon.png') no-repeat center;
        background-size: contain;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }

      .tooltip-content {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10;
        margin-bottom: 5px;
        max-width: 300px;
        white-space: pre;

        &:before {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 5px;
          border-style: solid;
          border-color: #333 transparent transparent transparent;
        }
      }

      &:hover .tooltip-content {
        display: block;
      }
    }
  }
}

// 备注区域
.product-remark {
  display: flex;
  align-items: center;
  gap: 8px;

  .remark-text {
    flex: 1;
    font-size: 14px;
    color: #666;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .edit-icon {
    width: 12px;
    height: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }
}

// 订单状态区域
.order-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .logistics-btn {
    color: #ff186b;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      text-decoration: underline;
    }
  }

  .group-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    .invite-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: linear-gradient(299deg, #FF326C 0%, #FF3434 41%, #FF3810 100%);
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;

      img {
        width: 16px;
        height: 16px;
      }
    }

    .invite-tip {
      font-size: 12px;
      color: #ff186b;
    }
  }

  .reward-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid #ff186b;
    border-radius: 4px;
    background: transparent;
    color: #ff186b;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;

    img {
      width: 16px;
      height: 16px;
    }

    &:hover {
      background: rgba(255, 24, 107, 0.1);
    }
  }
}

// 商品总价
.product-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  .total-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;

    .price-tooltip {
      position: relative;
      display: inline-block;

      .help-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('@/assets/images/public/help-icon.png') no-repeat center;
        background-size: contain;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }

      .tooltip-content {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10;
        margin-bottom: 5px;
        text-align: left;

        &:before {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 5px;
          border-style: solid;
          border-color: #333 transparent transparent transparent;
        }
      }

      &:hover .tooltip-content {
        display: block;
      }
    }
  }

  .coupon-discount {
    font-size: 14px;
    color: #ff186b;
  }
}

// 订单操作区域
.product-actions {
  display: flex;
  align-items: center;
  gap: 8px;

  .payment-actions,
  .payment-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #969696;
  }

  .payment-timer {
    /deep/ .date {
      color: #ff186b;
    }
  }

  .detail-btn {
    color: #333;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #ff186b;
    }
  }

  .return-section {
    display: flex;
    align-items: center;
    gap: 4px;

    .return-btn {
      color: #ff186b;
      font-size: 15px;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        text-decoration: underline;
      }
    }

    .return-timer {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #999;
      cursor: pointer;

      .help-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('@/assets/images/public/help-icon.png') no-repeat center;
        background-size: contain;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }

      /deep/ .date {
        color: #ff186b;
      }
    }
  }

  .cancel-return {
    color: #ff186b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      text-decoration: underline;
    }
  }

  .mend-btn {
    .mend-button {
      padding: 6px 12px;
      background: #ff186b;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
      min-width: 70px;

      &:hover {
        background: #e01660;
      }
    }
  }
}

// 商品照片区域
.product-photos,
.custom-photos,
.custom-videos {
  margin-top: 15px;
  padding: 15px;
  background: #f7f9fc;
  border-radius: 4px;

  .photo-section,
  .video-section {

    .photo-title,
    .video-title {
      font-size: 16px;
      color: #1e1714;
      margin-bottom: 10px;
    }

    .photo-list,
    .video-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
}

// 拒绝补款弹窗剩余样式
.reject-modal {
  .reject-actions {
    .close-btn {
      padding: 8px 40px;
      background: #F21473;
      border-radius: 8px;
      border: none;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: #e01368;
      }
    }
  }
}

// 物流包裹选择弹窗
.parcel-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  overflow: hidden;

  .parcel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }

    .close-icon {
      width: 20px;
      height: 20px;
      // background: url('@/assets/images/public/close-icon.png') no-repeat center;
      // background-size: contain;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.3s;

      &::before {
        content: "×";
        font-size: 20px;
        font-weight: bold;
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  .parcel-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;

    .parcel-table {
      width: 100%;
      border-collapse: collapse;

      thead {
        tr {
          th {
            padding: 12px 15px;
            text-align: left;
            background: #f9f9f9;
            font-weight: 500;
            color: #666;
            border-bottom: 1px solid #eee;
          }
        }
      }

      tbody {
        tr {
          td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: middle;

            .view-btn {
              padding: 6px 12px;
              background: #ff186b;
              border: none;
              border-radius: 4px;
              color: #fff;
              font-size: 14px;
              cursor: pointer;
              transition: background 0.3s;

              &:hover {
                background: #e01660;
              }
            }
          }

          &:last-child {
            td {
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  .parcel-footer {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;

    .cancel-btn {
      padding: 8px 20px;
      background: #f5f5f5;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #eee;
      }
    }

    .confirm-btn {
      padding: 8px 20px;
      background: #ff186b;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: #e01660;
      }
    }
  }
}

// 收货地址弹窗
.address-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;

  .address-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }

    .close-icon {
      width: 20px;
      height: 20px;
      // background: url('@/assets/images/public/close-icon.png') no-repeat center;
      // background-size: contain;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.3s;

      &::before {
        content: "×";
        font-size: 20px;
        font-weight: bold;
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  .address-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
  }
}

.cart-table-header {
  display: flex;
  height: 35px;
  border-radius: 8px;
  background: #F5F5F5;
  padding: 0 12px;
  margin-bottom: 20px;

  .item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #969696;
  }

  .text-center {
    justify-content: center;
  }
}

.cart-table-body {
  .shop-card {
    border-radius: 8px;
    border: 1px solid #F1F1F1;
    margin-bottom: 20px;
    padding: 0 11px;

    .shop-header {
      display: flex;
      align-items: center;
      padding: 12px 0;
      gap: 12px;
      border-bottom: 1px solid #F1F1F1;
      margin-bottom: 12px;


      .item {
        height: 20px;
        line-height: 20px;
        color: #969696;
        font-size: 12px;
      }

      .platform-tag {
        width: 20px;
        height: 20px;

        /deep/ img {
          width: 100%;
          height: 100%;
          margin: 0;
        }
      }
    }
  }
}

.shop-product-list {
  display: flex;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F1F1;

  .item {
    display: flex;
    align-items: center;
  }

  .text-center {
    justify-content: center;
  }

  &:last-child {
    border-bottom: none;
  }
}

.shop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0;
}

// 加载动画
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .order-container {
    padding: 10px;
  }

  .filter-section {
    padding: 15px;

    .filter-tabs {
      .tab-item {
        padding: 8px 12px;
        font-size: 14px;
      }
    }

    .search-box {
      flex-direction: column;
      gap: 15px;

      .search-left {
        width: 100%;

        .search-input,
        select {
          min-width: 100%;
        }
      }
    }
  }

  .product-main {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .order-footer {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .pagination-inner {
    flex-direction: column;
    gap: 10px;
  }

  // 弹窗在移动端的调整
  .modal-overlay .modal-container,
  .chat-modal,
  .logistics-modal,
  .mend-modal,
  .address-modal {
    width: 95%;
    max-width: none;
  }

  .parcel-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .order-actions {
      width: 100%;
      justify-content: space-between;
    }
  }

  .product-info {
    flex-direction: column;
  }

  .mend-actions {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
